<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快速创建地球</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="../../../build/Cesium/Widgets/widgets.css" type="text/css" />
		<link rel="stylesheet" href="../../../build/CEarth/CEarth.css" type="text/css" />
		<link rel="stylesheet" href="../assets/plugins/layui/css/layui.css" type="text/css" />
		<style>
			.infoview{
				position: absolute;
				top: 10px;
				left: 10px;
				padding: 10px 15px;
				border-radius: 4px;
				border: 1px solid rgba(128, 128, 128, 0.5);
				color: #ffffff;
				background: rgba(0, 0, 0, 0.4);
				box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
				z-index: 999;
			}
		</style>
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
		  <div class="layui-body" id="CEarthContainer" style="top: 0rem;left: 0rem;padding-bottom:0rem">
		  </div>			
		</div>
		
		
		<script src="../../../build/Cesium/Cesium.js"></script>
		<script src="../../../build/CEarth/CEarth.js"></script>
		<script src="../assets/plugins/layui/layui.js" charset="utf-8"></script>

		<script>
			layui.use(['form', 'layedit', 'laydate'], function(){
			   var $ = layui.jquery
			  ,form = layui.form
			  ,layer = layui.layer
			  ,layedit = layui.layedit
			  ,laydate = layui.laydate;
			   
			   var app = new CEarth.App('CEarthContainer');
			   
			   app.create({
			   	type: 'Map',
			   	style: {
			   		night: true, //是否开启白天黑夜 默认关闭
			   		fog: true, //是否开启雾效
			   		density: 0, //雾的浓度 默认0
			   		minimumBrightness: 0, //由照明产生的雾色的最小亮度。值0.0可以导致雾完全变黑。1.0的值不会影响亮度。
			   	},
			   	// terrain:{
			   	// type:'ion' 
			   	// },
			   	atmosphere: true, //是否开启大气效果，默认为 true
			   	complete: function(e) {}
			   });
			   
			   // 新建一个瓦片图层
			   var tileLayer = app.create({
			   	type: 'TileLayer',
			   	layer: {
			   		name: '天地图影像(EPSG:3857)',
			   		type: 'tdt',
			   		layer: 'img_d',
			   		key: '9ae78c51a0a28f06444d541148496e36',
			   		show: true,
			   	},
			   	complete: function(e) {}
			   });
			   
			   
			 app.create({
			 	type: 'Map',
			 	style: {
			 		night: true, //是否开启白天黑夜 默认关闭
			 		fog: true, //是否开启雾效
			 		density: 0, //雾的浓度 默认0
			 		minimumBrightness: 0, //由照明产生的雾色的最小亮度。值0.0可以导致雾完全变黑。1.0的值不会影响亮度。
			 	},
			 	atmosphere: true, //是否开启大气效果，默认为 true
			 	complete: function(e) {}
			 });
			 
			 // 新建一个瓦片图层
			 var tileLayer = app.create({
			 	type: 'TileLayer',
			 	layer: {
			 		name: '天地图影像(EPSG:3857)',
			 		type: 'tdt',
			 		layer: 'img_d',
			 		key: '9ae78c51a0a28f06444d541148496e36',
			 		show: true,
			 	},
			 	complete: function(e) {}
			 });
			 
			 var graphicsLayer = app.create({
			 	type: 'GraphicsLayer',
			 	layer: {
			 		group: {
			 			id: 'test',
			 			name: "測試"
			 		},
			 		graphics: {
			 			position: {
			 				x: 119.301166,
			 				y: 26.058558,
			 				z: 0
			 			},
						point:{
							size:20,
							color:'rgba(0, 255, 127, 1.0)',
							outline:{
								color:'rgba(255, 255, 0, 1.0)',
								width:5
							},
							HeightReference:0,//0-NONE 1-CLAMP_TO_GROUND 2-RELATIVE_TO_GROUND
							distanceDisplay:{
								near:0,
								far:5000
							},
							scaleByDistance:{
								near:0,
								nearValue:1,
								far:5000,
								farValue:0
							},
							translucencyByDistance:{
								near:0,
								nearValue:1,
								far:5000,
								farValue:0
							}
						},
						billboard:{
							scale:0.5,
							image:{
								url:'https://img0.baidu.com/it/u=1286618850,756091839&fm=26&fmt=auto&gp=0.jpg',
								//width:100,
								//height:100,
							},
							rotation:0,
							//color:'rgba(0, 255, 127, 1.0)',
							horizontal:0, // 0-CENTER 1-LEFT (-1)-RIGHT
							vertical:1,// 0-CENTER 1-BOTTOM (-1)-TOP 2-BASELINE
							HeightReference:1,//0-NONE 1-CLAMP_TO_GROUND 2-RELATIVE_TO_GROUND
							distanceDisplay:{
								near:0,
								far:5000
							},
							translucencyByDistance:{
								near:0,
								nearValue:1,
								far:5000,
								farValue:0
							},
							scaleByDistance:{
								near:0,
								nearValue:1,
								far:5000,
								farValue:0
							},
							pixelOffsetScaleByDistance:{
								near:0,
								nearValue:1,
								far:5000,
								farValue:0
							},
						},
						label:{
							text:'克隆地區',
							scale:1,
							background:{
								show:true,
								color:'rgba(3, 0, 0, 0.5)',
								padding:{
									x:5,
									y:5
								}
							},
							color:'rgba(0, 255, 127, 1.0)',
							style:2,// 0-填写标签的文本，但不要勾勒轮廓（FILL） 1-概述标签的文本，但不要填写。（OUTLINE） 2-填写并标记标签文本。（FILL_AND_OUTLINE）
							font:"italic small-caps bold 30px arial,sans-serif",
							outline:{
								color:'rgba(255, 255, 0, 1.0)',
								width:10
							},
							horizontal:1, // 0-CENTER 1-LEFT (-1)-RIGHT
							vertical:0,// 0-CENTER 1-BOTTOM (-1)-TOP 2-BASELINE
							HeightReference:0,//0-NONE 1-CLAMP_TO_GROUND 2-RELATIVE_TO_GROUND
							pixelOffset:{
								x:50,
								y:-200
							},
							distanceDisplay:{
								near:0,
								far:5000
							},
							translucencyByDistance:{
								near:0,
								nearValue:1,
								far:5000,
								farValue:0
							},
							scaleByDistance:{
								near:0,
								nearValue:1,
								far:5000,
								farValue:0
							},
							pixelOffsetScaleByDistance:{
								near:0,
								nearValue:1,
								far:5000,
								farValue:0
							},
						},
						properties:{
						},
					}
			 	},
			 	complete: function(e) {console.log(e);}
			 });
			 
			 app.cam.fly({
			 	location: {
			 		x: 119.301166,
			 		y: 26.058558,
			 		z: 500
			 	},
			 	time: 5,
			 	complete: function() {
			 	}
			 })
		})
		</script>
	</body>
</html>
